<template>
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="100px">
            <el-form-item label="分享给" prop="type" :rules="[formRulesMixin.notNull]" v-if="obj.data.rank!=3">
                <el-select v-model="obj.data.type" placeholder="请选择分享类型" clearable>
                    <el-option v-for="(item,index) in obj.types" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item v-if="obj.data.type==0" label="分享给个人" prop="userid" :rules="[formRulesMixin.notNull]">
                <el-cascader v-model="obj.data.userid" :props="getArrP" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item v-if="obj.data.type==1" label="分享给部门" prop="dept_id" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.dept_id" placeholder="请选择部门" clearable multiple>
                    <el-option v-for="(item,index) in obj.depts" :key="index" :label="item.name" :value="item.dept_id" />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="btns">
            <span class="btn clear" @click="$emit('close')">取消</span>
            <span class="btn sub" @click.prevent="share">分享</span>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed } from 'vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        shareF: { type: Object, require: true, default: {} },
    })

    let obj = reactive({
        depts: [],
        types: [
            {id:0,name:'个人'},
            {id:1,name:'部门'}
        ],
        data:{
            "dept_id": [],
            "userid": [],
            "file_id": ''
        },
    })
    let init = async () => {
        obj.data = {
            ...obj.data,
            ...props.shareF
        }
        obj.depts = await proxy.$setting.getdepts()
    }
    init()

    const getArrP = {
        lazy: true,
        label:'name', value: 'id',
        checkStrictly: true,
        multiple: true,
        async lazyLoad(node, resolve) {
            const { level,value } = node
            setTimeout(async() => {
                if(level==0){
                    let arr = obj.depts
                    arr.map(e=>{
                        e.disabled = true
                        e.id=e.dept_id
                    })
                    resolve(arr)
                }else if(level==1){
                    let arr = await proxy.$setting.getusers(value)
                    arr.map(e=>{
                        e.leaf = true
                        e.id=e.userid
                    })
                    resolve(arr)
                }else{resolve([])}
            }, 200);
        }
    }

    const share = ()=> {
        proxy.$ajax({
            url: '/user/file/share',
            data: {
                file_id: obj.data.file_id,
                dept_id: obj.data.dept_id.join(',')||'',
                userid: obj.data.userid.join(',')||''
            },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin(`分享成功`, 'success')
                emit('close')
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    .checkboxgroup { display: flex; }
</style>

